<template>
    <div class="dirs-box">
        <div class="dirs-items-box" :class="{link:daPorps.item.CUST_TYPE === 0}">
            <div class="title-box">
                <div class="arrow-box">
                    <el-icon class="arrow" v-show="iconRighe" 
                        @click="iconAngle"
                        v-if="daPorps.item.CUST_TYPE === 1"
                    ><CaretRight /></el-icon>
                    <el-icon class="arrow" v-show="iconBottom" 
                        @click="iconAngle"
                        v-if="daPorps.item.CUST_TYPE === 1"
                    ><CaretBottom /></el-icon> 
                </div>            
                <div class="icon-box" >                               
                    <input type="checkbox" :value="daPorps.item.ADMID" 
                        :checked="daPorps.item.checked"
                        :indeterminate="daPorps.item.indeterminate"
                        @change="checkChangInfoToParent($event,daPorps.item,daPorps.oldDirsInfo)"
                    >
                    <el-icon>
                        <component :is="daPorps.item.CUST_TYPE ? 'Folder' : 'Document'"/>
                    </el-icon>
                    <span>{{ daPorps.item.TITLE }}</span>  
                          <!-- {{ daPorps.item.ADMID !== null }} -->
                </div>  
            </div>           
            <div class="aud-check" v-show="daPorps.item.CUST_TYPE === 0">
                <input type="checkbox" :value="daPorps.item.IS_ADD ? daPorps.item.IS_ADD : 0"
                    :checked="daPorps.item.IS_ADD ? true : false"
                    @change="changeAud($event,daPorps.item,'add')"                    
                ><label class="aud-lab">增</label>
                <input type="checkbox" :value="daPorps.item.IS_UPDATE ? daPorps.item.IS_UPDATE : 0"
                    :checked="daPorps.item.IS_UPDATE ? true : false" 
                    @change="changeAud($event,daPorps.item,'update')"                   
                ><label class="aud-lab">改</label>
                <input type="checkbox" :value="daPorps.item.IS_DEL ? daPorps.item.IS_DEL : 0"
                    :checked="daPorps.item.IS_DEL ? true : false" 
                    @change="changeAud($event,daPorps.item,'del')"                   
                ><label class="aud-lab">删</label>
            </div>
        </div>
        <DirsOfAuthority 
            v-for="(sub,j) in daPorps.item.children" 
            :key="j" 
            :item="sub" 
            :oldDirsInfo="daPorps.oldDirsInfo"
            class="sub" 
            :class="{show:subIsShow}"
        />
    </div>
</template>

<script setup>
import {ref ,  defineProps } from 'vue'
import { mainStore } from '@/stores/store'
import { onMounted } from 'vue'

let useStore = mainStore()


let daPorps = defineProps({
    item: {
        type: Object
    },
    oldDirsInfo:{
        type: Array
    }
})


const checkedOrIndeterminate = (item,all)=>{
    // let checked = checkStatus
    // let indeterminate = indStatus

    /**
     * 递归查找-获取有权限的子级
     * @param data 所有权限目录
     * @returns 具有权限下的所有子级
     */
    const fliterChildHasAuth = (data)=>{
        let arr2 = []
        // 新增递归查找函数
        const findChild = (nodes) => {
            for (const node of nodes) {
                if (node.ADMID !== null) {
                    arr2.push(node)
                }
                if (node.children && node.children.length > 0) {
                    const found = findChild(node.children)
                    if (found) arr2.push(found)
                }
            }
        }
        findChild(data)
        return arr2
    }

    /**
     * 递归查找-获取所有的子级
     * @param data 所有权限目录
     * @returns 所有子级
     */
    const fliterChild = (data)=>{
        let arr2 = []
        // 新增递归查找函数
        const findChild = (nodes) => {
            for (const node of nodes) {
                arr2.push(node)
                if (node.children && node.children.length > 0) {
                    const found = findChild(node.children)
                    if (found) arr2.push(found)
                }
            }
        }
        findChild(data)
        return arr2
    }

    //初始化展示已有权限状态
    if(item.ADMID !== null ){
        //末级子级
        if(item.PARENT !== null && item.CUST_TYPE === 0) item.checked = true
        //中间层父级
        if(item.PARENT !== null && item.CUST_TYPE === 1){
            let has = fliterChildHasAuth(item.children) //已拥有权限的子级
            let old = fliterChild(item.children) //权限目录下所有的子级
            if(has.length === old.length){
                item.checked = true 
                item.indeterminate = false
            }else{
                item.checked = false
                item.indeterminate = true
            }            
        }
        //顶级父级
        if(item.PARENT === null && item.CUST_TYPE === 1){
            let has = fliterChildHasAuth(item.children) //已拥有权限的子级            
            let old = fliterChild(all.filter(child => child.ADMID === item.ADMID)[0].children) //权限目录下所有的子级
            if(has.length === old.length){
                item.checked = true 
                item.indeterminate = false
            }else{
                item.checked = false
                item.indeterminate = true
            } 
        }
    }      
    // return {checked, indeterminate}
}


//目录展开/折叠
let iconRighe = ref(false)
let iconBottom = ref(true)
let subIsShow = ref(true)
const iconAngle = ()=>{
    iconRighe.value = !iconRighe.value
    iconBottom.value = !iconBottom.value
    subIsShow.value = !subIsShow.value
}


/**
 * 添加及删除权限明细
 * @param $event checkbox选中状态
 * @param type 处理类型
 * @param row 选中的行数据
 * @param all dirinfo
 * 
 */
const checkChangInfoToParent = ($event,row,all)=>{
    // console.log($event.target.checked)
    // console.log($event.target.indeterminate)
    // console.log(row)
    // console.log(all)

    /**
     * 递归查找对应父级
     * @param data 所有权限目录
     * @param parent 父级ID
     * @returns 选中的权限下的所有子级
     */
    const filterParent = (nodes, parent) => {
        for (const node of nodes) {
            if (node.ID === parent) {
                return node
            }
            if (node.children && node.children.length > 0) {
                const found = filterParent(node.children, parent)
                if (found) return found
            }
        }
    }

    /**
     * 更新父级
     * @param all 所有权限目录
     * @param row 选中的权限
     * @param checkedStatus 选中状态`
     */
    const updateParent = (all, row ,checkedStatus) => {
        let parentNode = filterParent(all, row.PARENT)
        // console.log(parentNode)
        if(checkedStatus){
            //检查父级的子级是否全选
            let isAllChecked = parentNode.children.every(child => child.checked === true)
            // console.log(isAllChecked)
            if(isAllChecked ){
                parentNode.checked = true
                parentNode.indeterminate = false
            }else{
                parentNode.checked = false
                parentNode.indeterminate = true
            }
            if(parentNode.ADMID === null) useStore.addNeedAddAuthDirsMidd(parentNode)
            if(parentNode.PARENT !== null) updateParent(all, parentNode ,checkedStatus)
        }else{
            // 检查父级的子级是否全不选
            let isAllNoChecked = parentNode.children.every(child => {
                // console.log(child)
                if(child.CUST_TYPE === 1) return (child.checked === false && child?.indeterminate === false && !child.checked) || (!child.checked && !child.indeterminate)              
                if(child.CUST_TYPE === 0) return child.checked === false || !child.checked
            })
            // console.log(isAllNoChecked)
            if(isAllNoChecked){
                parentNode.checked = false
                parentNode.indeterminate = false
                useStore.addNeedDelAuthDirsMidd(parentNode)
            }else{
                parentNode.checked = false
                parentNode.indeterminate = true
            }            
            if(parentNode.PARENT !== null) updateParent(all, parentNode,checkedStatus)
        }        
    }

    /**
     * 更新子级
     * @param row 选中的权限
     * @param checkedStatus 选中状态
     */
    const updateChild = (row,checkedStatus) => {
        // 检查子级的父级是否全选
        row.children.forEach(child => {
            if(child.CUST_TYPE === 0) {
                child.checked = checkedStatus
                if(checkedStatus) useStore.addNeedAddAuthDirsMidd(child)
                if(!checkedStatus) useStore.addNeedDelAuthDirsMidd(child)
            }
            if(child.CUST_TYPE === 1) {
                child.checked = checkedStatus
                child.indeterminate = false
                if(checkedStatus) useStore.addNeedAddAuthDirsMidd(child)
                if(!checkedStatus) useStore.addNeedDelAuthDirsMidd(child)
                updateChild(child,checkedStatus)
            }
        })
    }

    // 末级子级
    if(row.PARENT!== null && row.CUST_TYPE === 0) {
        // 更新当前节点状态
        if($event.target.checked){
            row.checked = true
            useStore.addNeedAddAuthDirsMidd(row)
            updateParent(all, row ,$event.target.checked)
        }else{
            row.checked = false
            useStore.addNeedDelAuthDirsMidd(row)
            updateParent(all, row ,$event.target.checked)
        }
    }
    // 中间层父级
    if(row.PARENT!== null && row.CUST_TYPE === 1) {
        // 更新当前节点状态
        if($event.target.checked){
            row.checked = true
            row.indeterminate = false
            useStore.addNeedAddAuthDirsMidd(row)
            updateChild(row,$event.target.checked)
            updateParent(all, row,$event.target.checked)
        }else{
            row.checked = false
            row.indeterminate = false
            useStore.addNeedDelAuthDirsMidd(row)
            updateChild(row,$event.target.checked)
            updateParent(all, row,$event.target.checked)
        }
    }
    // 顶级父级
    if(row.PARENT === null && row.CUST_TYPE === 1) {
        // 更新当前节点状态
        if($event.target.checked){
            row.checked = true
            row.indeterminate = false
            useStore.addNeedAddAuthDirsMidd(row)
            updateChild(row,$event.target.checked)
        }else{
            row.checked = false
            row.indeterminate = false
            useStore.addNeedDelAuthDirsMidd(row)
            updateChild(row,$event.target.checked)
        }
    }
}



/**
 * 修改权限中的增改删
 * @param $event checkbox选中状态
 * @param row 选中的行数据
 * @param type 增改删类型 add增 update改 del删
 */
const changeAud = ($event,row,type)=>{
    // console.log($event.target.checked)
    // console.log(row) 
    // console.log(type)
    if(type === 'add') row.IS_ADD = $event.target.checked ? 1 : 0 
    if(type === 'update') row.IS_UPDATE = $event.target.checked ? 1 : 0
    if(type === 'del') row.IS_DEL = $event.target.checked ? 1 : 0
    useStore.addNeedUpdateAuthDirsMidd(row)
    // console.log(useStore.needUpdateAuthDirsMidd)
}


onMounted(()=>{
    //初始化展示已有权限状态
    checkedOrIndeterminate(daPorps.item,daPorps.oldDirsInfo)
})
</script>

<style lang="less" scoped>
.dirs-box{
    width: 100%;
    .dirs-items-box{
       height:1.25rem;
       width: 95%;
       display: flex;
       align-items: center;
       .title-box{
            width: 75%;
            display: flex;
            align-items: center;
            .arrow-box{
                width: 10%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .icon-box{
                width: 90%;
                display: flex;
                align-items: center; 
                color:rgb(67, 70, 70);
                .el-checkbox{
                    margin-right: .625rem;
                }
                span{
                    font-size:.875rem;
                    padding-left:.3125rem;
                }
            }
       }
       .aud-check{
            width: 25%;
            display: flex;
            // justify-content: flex-end;
            justify-content: center;
            .aud-lab{
                margin-left: .625rem;
                margin-right: .625rem;
                font-size: .875rem;
            }
       }
        .item-sub{
            padding-left: .625rem;
        }
    }
    .link{
        background-color:rgba(241, 238, 238, 0.3);
    }
    .sub{
        padding-left: .625rem;
        display: none;
    }
    .sub.show{
        display: block;
    }
}


</style>